import React from 'react'
import { Form, Input, Space, Button, Modal } from 'antd'
import TheUpload from '@/components/TheUpload'
const { TextArea } = Input

export default class SelfSupportShopTable extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      loading: false,
      isModal: false,
    }
  }
  // 申请品牌弹窗
  applyBrand = () => {
    this.setState({ isModal: true })
  }
  // 取消
  handleCancel = () => {
    this.applyRef.resetFields()
    this.setState({ isModal: false })
  }
  handleOk = () => {
    this.handleCancel()
  }
  // 上传图片
  getApplyFileResult = (file) => {
    if (file.length && file[0].response && file[0].response.code === 0) {
      let url = file[0].response.data
      this.applyRef.setFieldsValue({ brandImg: url })
    } else {
      this.applyRef.setFieldsValue({ brandImg: '' })
    }
  }
  render() {
    let { isModal, loading } = this.state
    return (
      <>
        <Modal title="申请品牌" width='25%' visible={isModal} footer={null} onCancel={this.handleCancel}>
          <Form ref={ref => this.applyRef = ref} onFinish={this.handleOk} initialValues={{ brandDetail: '' }}>
            <Form.Item label="品牌名称" name="brandName" rules={[{ required: true }]}>
              <Input maxLength={20} />
            </Form.Item>
            <Form.Item label="品牌图片" name="brandImg" rules={[{ required: true }]}>
              <TheUpload len={1} getFileResult={this.getApplyFileResult} />
            </Form.Item>
            <Form.Item
              label="品牌介绍"
              name="brandDetail">
              <TextArea showCount maxLength={100} style={{ height: 120, }} placeholder="请输入品牌介绍" />
            </Form.Item>
            <Form.Item>
              <div style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: -30 }}>
                <Space>
                  <Button onClick={this.handleCancel}>取消</Button>
                  <Button type="primary" htmlType="submit" loading={loading}>确认</Button>
                </Space>
              </div>
            </Form.Item>
          </Form>
        </Modal >
      </>
    )
  }
}